<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border:solid 1px #ccc;
            width: 400px;
            height: 34px;
        }
        select,input,button{
            float:left;
            border:none;
            outline: none;
            line-height: 34px;
            height: 34px;
        }
        select{
            width: 70px;
        }
        input{
            width:230px;
        }
        button{
            width: 100px;
        }
        .clear{
            clear:both;
        }
    </style>
</head>

<body>
    <div>
        <select>
            <option value="bing">Bing</option>
            <option value="google">Google</option>
            <option value="baidu">Baidu</option>
        </select>
        <input type="text" placeholder="bing搜索关键字">
        <button>Bing一下</button>
        <br class="clear">

        

    </div>
    <script>
        var slt = document.querySelector('select');
        var box = document.querySelector('input');
        var btn = document.querySelector('button');
        slt.onchange = function () {
            // this => select对象
            // alert(slt.value); // 输出选中项的值
            if(slt.value == 'baidu'){
                btn.innerHTML = '百度搜索';
                box.placeholder = '百度搜索关键字';
            }else if(slt.value == 'google'){
                // btn.innerHTML = 'Google搜索';
                // box.placeholder = 'Google搜索关键字';
                slt.value = 'baidu';
            }else{
                btn.innerHTML = 'Bing搜索';
                box.placeholder = 'Bing搜索关键字';
            }
        };
    </script>

</body>

</html>